<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app" style="border: 1px solid red; padding: 10px;">
    <h1>新闻列表</h1>
    <news-list></news-list>
  </div>
  
  <template id="news-list-template">
    <ul style="border: 1px solid blue; padding: 10px;">
      <news-item v-for="news in newsArray" :id="news.id"
        :title="news.title" :content="news.content"></news-item>
    </ul>
  </template>
  
  <template id="news-item-template">
    <li style="border: 1px solid green; padding: 10px;">
      <span>新闻ID: {{ id }}</span> <br />
      <span>标题：{{ title }}</span> <br />
      <span>内容：{{ content }}</span>
    </li>
  </template>
  
  <script src="js/vue.js"></script>
  <script>
    // 创建子组件
    const newsItem = {
      template: '#news-item-template',
      props: ['id', 'title', 'content']
    };
  
    // 创建父组件
    const newsList = {
      template: '#news-list-template',
      components: {
        'news-item': newsItem
      },
      data() {
        return {
          newsArray: [
            { id: 1, title: '新闻标题1', content: '新闻内容1' },
            { id: 2, title: '新闻标题2', content: '新闻内容2' },
            { id: 3, title: '新闻标题3', content: '新闻内容3' }
          ]
        };
      }
    };
  
    // 创建Vue实例，并将父组件注册到Vue实例中
    const app = new Vue({
      el: '#app',
      components: {
        'news-list': newsList
      }
    });
  </script>
</body>
</html>